<template>
  <div class="document-search-page">
    <!-- 搜索头部 -->
    <div class="search-header">
      <div class="header-content">
        <div class="search-title">
          <h1>希能文档检索系统</h1>
          <p>快速检索企业文档，在线预览，高效办公</p>
        </div>
        
        <!-- 核心搜索框 -->
        <div class="main-search">
          <el-input
            v-model="searchKeyword"
            placeholder="搜索文档标题、内容、标签... (如：MMC项目、血压计、培训资料)"
            class="search-input"
            size="large"
            clearable
            @input="handleSearch"
            @keyup.enter="performSearch"
          >
            <template #prefix>
              <el-icon class="search-icon"><Search /></el-icon>
            </template>
            <template #suffix>
              <el-button type="primary" @click="performSearch" class="search-btn">
                搜索
              </el-button>
            </template>
          </el-input>
          
          <!-- 搜索建议 -->
          <div v-if="showSuggestions && searchSuggestions.length" class="search-suggestions">
            <div
              v-for="(suggestion, index) in searchSuggestions"
              :key="index"
              class="suggestion-item"
              @click="selectSuggestion(suggestion)"
            >
              <el-icon><Search /></el-icon>
              <span>{{ suggestion }}</span>
            </div>
          </div>
        </div>
        
        <!-- 快速搜索标签 -->
        <div class="quick-tags">
          <span class="tags-label">热门搜索：</span>
          <el-tag
            v-for="tag in hotTags"
            :key="tag"
            @click="selectQuickTag(tag)"
            class="quick-tag"
            effect="plain"
          >
            {{ tag }}
          </el-tag>
        </div>
      </div>
    </div>

    <!-- 主内容区 -->
    <div class="main-content">
      <div class="content-container">
        <!-- 左侧筛选面板 -->
        <div class="filter-panel">
          <div class="filter-section">
            <h3>筛选条件</h3>
            
            <!-- 文档类型筛选 -->
            <div class="filter-group">
              <h4>文档类型</h4>
              <el-checkbox-group v-model="filters.types" @change="applyFilters">
                <el-checkbox value="pdf">PDF文档 ({{ typeStats.pdf }})</el-checkbox>
                <el-checkbox value="docx">Word文档 ({{ typeStats.docx }})</el-checkbox>
                <el-checkbox value="pptx">PowerPoint ({{ typeStats.pptx }})</el-checkbox>
                <el-checkbox value="xlsx">Excel表格 ({{ typeStats.xlsx }})</el-checkbox>
                <el-checkbox value="image">图片文件 ({{ typeStats.image }})</el-checkbox>
              </el-checkbox-group>
            </div>
            
            <!-- 项目标签筛选 -->
            <div class="filter-group">
              <h4>项目分类</h4>
              <el-checkbox-group v-model="filters.projects" @change="applyFilters">
                <el-checkbox value="MMC">MMC项目 ({{ projectStats.MMC }})</el-checkbox>
                <el-checkbox value="training">培训资料 ({{ projectStats.training }})</el-checkbox>
                <el-checkbox value="bidding">投标文件 ({{ projectStats.bidding }})</el-checkbox>
                <el-checkbox value="technical">技术文档 ({{ projectStats.technical }})</el-checkbox>
                <el-checkbox value="equipment">设备资料 ({{ projectStats.equipment }})</el-checkbox>
              </el-checkbox-group>
            </div>
            
            <!-- 时间范围筛选 -->
            <div class="filter-group">
              <h4>时间范围</h4>
              <el-radio-group v-model="filters.timeRange" @change="applyFilters">
                <el-radio value="all">全部时间</el-radio>
                <el-radio value="today">今天</el-radio>
                <el-radio value="week">本周</el-radio>
                <el-radio value="month">本月</el-radio>
                <el-radio value="year">本年</el-radio>
              </el-radio-group>
              
              <el-date-picker
                v-if="filters.timeRange === 'custom'"
                v-model="filters.customDateRange"
                type="daterange"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                size="small"
                style="margin-top: 8px; width: 100%;"
                @change="applyFilters"
              />
            </div>
            
            <!-- 常用操作 -->
            <div class="filter-group">
              <h4>常用操作</h4>
              <div class="quick-actions">
                <el-button @click="viewRecentDocs" class="action-btn">
                  <el-icon><Clock /></el-icon>
                  最近查看
                </el-button>
                <el-button @click="viewFavorites" class="action-btn">
                  <el-icon><Star /></el-icon>
                  我的收藏
                </el-button>
                <el-button @click="uploadDoc" class="action-btn">
                  <el-icon><Upload /></el-icon>
                  上传文档
                </el-button>
              </div>
            </div>
            
            <!-- 清除筛选 -->
            <div class="filter-actions">
              <el-button @click="clearFilters" size="small">清除筛选</el-button>
            </div>
          </div>
        </div>
        
        <!-- 右侧文档展示区 -->
        <div class="documents-area">
          <!-- 搜索结果统计和排序 -->
          <div class="results-header">
            <div class="results-info">
              <span class="results-count">
                找到 <strong>{{ filteredDocuments.length }}</strong> 个文档
                <span v-if="searchKeyword">(搜索: "{{ searchKeyword }}")</span>
              </span>
            </div>
            
            <div class="results-controls">
              <el-select v-model="sortBy" @change="applySorting" size="small" style="width: 120px;">
                <el-option value="relevance" label="相关性"/>
                <el-option value="time" label="时间"/>
                <el-option value="name" label="名称"/>
                <el-option value="size" label="大小"/>
              </el-select>
              
              <el-button-group class="view-toggle">
                <el-button 
                  :type="viewMode === 'grid' ? 'primary' : 'default'" 
                  @click="viewMode = 'grid'"
                  size="small"
                >
                  <el-icon><Grid /></el-icon>
                </el-button>
                <el-button 
                  :type="viewMode === 'list' ? 'primary' : 'default'" 
                  @click="viewMode = 'list'"
                  size="small"
                >
                  <el-icon><List /></el-icon>
                </el-button>
              </el-button-group>
            </div>
          </div>
          
          <!-- 文档展示区域 -->
          <div class="documents-display" v-loading="loading">
            <!-- 网格视图 -->
            <div v-if="viewMode === 'grid'" class="documents-grid">
              <div
                v-for="doc in paginatedDocuments"
                :key="doc.id"
                class="document-card"
                @click="previewDocument(doc)"
              >
                <div class="doc-thumbnail">
                  <img v-if="doc.thumbnail" :src="doc.thumbnail" :alt="doc.name" />
                  <div v-else class="doc-icon">
                    <el-icon size="48">
                      <component :is="getDocumentIcon(doc.type)" />
                    </el-icon>
                  </div>
                  <div class="doc-type-badge">{{ doc.type.toUpperCase() }}</div>
                </div>
                
                <div class="doc-info">
                  <h4 class="doc-title" :title="doc.name">{{ doc.name }}</h4>
                  <p class="doc-meta">
                    <span class="doc-size">{{ formatFileSize(doc.size) }}</span>
                    <span class="doc-date">{{ formatDate(doc.updatedAt) }}</span>
                  </p>
                  <div class="doc-tags">
                    <el-tag
                      v-for="tag in doc.tags.slice(0, 2)"
                      :key="tag"
                      size="small"
                      effect="plain"
                    >
                      {{ tag }}
                    </el-tag>
                    <span v-if="doc.tags.length > 2" class="more-tags">+{{ doc.tags.length - 2 }}</span>
                  </div>
                </div>
                
                <div class="doc-actions">
                  <el-button @click.stop="previewDocument(doc)" size="small" type="primary">
                    <el-icon><View /></el-icon>
                    预览
                  </el-button>
                  <el-button @click.stop="downloadDocument(doc)" size="small">
                    <el-icon><Download /></el-icon>
                  </el-button>
                  <el-button @click.stop="toggleFavorite(doc)" size="small" :type="doc.isFavorite ? 'warning' : 'default'">
                    <el-icon><Star /></el-icon>
                  </el-button>
                </div>
              </div>
            </div>
            
            <!-- 列表视图 -->
            <div v-else class="documents-list">
              <el-table :data="paginatedDocuments" @row-click="previewDocument" style="width: 100%">
                <el-table-column width="60">
                  <template #default="{ row }">
                    <el-icon size="24">
                      <component :is="getDocumentIcon(row.type)" />
                    </el-icon>
                  </template>
                </el-table-column>
                
                <el-table-column prop="name" label="文档名称" min-width="300">
                  <template #default="{ row }">
                    <div class="doc-name-cell">
                      <span class="doc-name">{{ row.name }}</span>
                      <div class="doc-tags-inline">
                        <el-tag
                          v-for="tag in row.tags.slice(0, 3)"
                          :key="tag"
                          size="small"
                          effect="plain"
                          style="margin-right: 4px;"
                        >
                          {{ tag }}
                        </el-tag>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                
                <el-table-column prop="type" label="类型" width="80">
                  <template #default="{ row }">
                    <el-tag size="small">{{ row.type.toUpperCase() }}</el-tag>
                  </template>
                </el-table-column>
                
                <el-table-column prop="size" label="大小" width="100">
                  <template #default="{ row }">{{ formatFileSize(row.size) }}</template>
                </el-table-column>
                
                <el-table-column prop="updatedAt" label="修改时间" width="120">
                  <template #default="{ row }">{{ formatDate(row.updatedAt) }}</template>
                </el-table-column>
                
                <el-table-column label="操作" width="180" fixed="right">
                  <template #default="{ row }">
                    <el-button @click.stop="previewDocument(row)" size="small" type="primary">预览</el-button>
                    <el-button @click.stop="downloadDocument(row)" size="small">下载</el-button>
                    <el-button @click.stop="toggleFavorite(row)" size="small" :type="row.isFavorite ? 'warning' : 'default'">
                      <el-icon><Star /></el-icon>
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            
            <!-- 空状态 -->
            <div v-if="!loading && filteredDocuments.length === 0" class="empty-state">
              <el-icon size="64" class="empty-icon"><DocumentRemove /></el-icon>
              <h3>未找到相关文档</h3>
              <p>尝试调整搜索关键词或筛选条件</p>
              <el-button @click="clearFilters" type="primary">清除筛选条件</el-button>
            </div>
          </div>
          
          <!-- 分页 -->
          <div v-if="filteredDocuments.length > pageSize" class="pagination-container">
            <el-pagination
              v-model:current-page="currentPage"
              :page-size="pageSize"
              :total="filteredDocuments.length"
              layout="prev, pager, next, jumper, total"
              @current-change="handlePageChange"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import { useDocumentStore } from '@/store/document'
import { ElMessage } from 'element-plus'
import {
  Search, Clock, Star, Upload, Grid, List, View, Download,
  Document, Picture, VideoPlay, DocumentRemove
} from '@element-plus/icons-vue'

const router = useRouter()
const documentStore = useDocumentStore()

// 响应式数据
const searchKeyword = ref('')
const showSuggestions = ref(false)
const loading = ref(false)
const viewMode = ref('grid') // grid | list
const sortBy = ref('relevance')
const currentPage = ref(1)
const pageSize = ref(18)

// 筛选条件
const filters = reactive({
  types: [],
  projects: [],
  timeRange: 'all',
  customDateRange: null
})

// 热门搜索标签
const hotTags = ref([
  'MMC项目', '血压计', '培训资料', 'FMD血流检测', '投标书', 
  '技术方案', '设备采购', '欧姆龙', '智众医信', '评分标准'
])

// 搜索建议
const searchSuggestions = computed(() => {
  if (!searchKeyword.value) return []
  
  const allSuggestions = [
    'FMD血流检测仪', 'MMC项目招标', '欧姆龙血压计HEM-7136',
    '培训考试评分标准', '技术方案书', '投标文件模板',
    '智众医信SaaS平台', '设备采购清单', '医疗器械培训',
    '血管检测设备', '代谢管理中心', '医院信息化方案'
  ]
  
  return allSuggestions
    .filter(item => item.toLowerCase().includes(searchKeyword.value.toLowerCase()))
    .slice(0, 8)
})

// 文档统计数据
const typeStats = reactive({
  pdf: 45,
  docx: 32,
  pptx: 28,
  xlsx: 15,
  image: 12
})

const projectStats = reactive({
  MMC: 38,
  training: 25,
  bidding: 18,
  technical: 22,
  equipment: 29
})

// 计算属性
const filteredDocuments = computed(() => {
  let docs = documentStore.documents

  // 关键词搜索
  if (searchKeyword.value) {
    const keyword = searchKeyword.value.toLowerCase()
    docs = docs.filter(doc => 
      doc.name.toLowerCase().includes(keyword) ||
      doc.tags.some(tag => tag.toLowerCase().includes(keyword)) ||
      (doc.content && doc.content.toLowerCase().includes(keyword))
    )
  }

  // 文档类型筛选
  if (filters.types.length > 0) {
    docs = docs.filter(doc => filters.types.includes(doc.type))
  }

  // 项目标签筛选
  if (filters.projects.length > 0) {
    docs = docs.filter(doc => 
      filters.projects.some(project => doc.tags.includes(project))
    )
  }

  // 时间范围筛选
  if (filters.timeRange !== 'all') {
    const now = new Date()
    const filterDate = new Date()
    
    switch (filters.timeRange) {
      case 'today':
        filterDate.setHours(0, 0, 0, 0)
        break
      case 'week':
        filterDate.setDate(now.getDate() - 7)
        break
      case 'month':
        filterDate.setMonth(now.getMonth() - 1)
        break
      case 'year':
        filterDate.setFullYear(now.getFullYear() - 1)
        break
    }
    
    docs = docs.filter(doc => new Date(doc.updatedAt) >= filterDate)
  }

  return docs
})

const paginatedDocuments = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  const end = start + pageSize.value
  return filteredDocuments.value.slice(start, end)
})

// 方法
let searchTimer = null
const handleSearch = (value) => {
  clearTimeout(searchTimer)
  
  if (!value.trim()) {
    showSuggestions.value = false
    return
  }
  
  searchTimer = setTimeout(() => {
    showSuggestions.value = true
  }, 200)
}

const selectSuggestion = (suggestion) => {
  searchKeyword.value = suggestion
  showSuggestions.value = false
  performSearch()
}

const selectQuickTag = (tag) => {
  searchKeyword.value = tag
  performSearch()
}

const performSearch = () => {
  showSuggestions.value = false
  currentPage.value = 1
  
  // 添加到搜索历史
  if (searchKeyword.value.trim()) {
    documentStore.addSearchHistory(searchKeyword.value.trim())
  }
}

const applyFilters = () => {
  currentPage.value = 1
}

const clearFilters = () => {
  filters.types = []
  filters.projects = []
  filters.timeRange = 'all'
  filters.customDateRange = null
  searchKeyword.value = ''
  currentPage.value = 1
}

const applySorting = () => {
  // 排序逻辑将在后续实现
  currentPage.value = 1
}

const getDocumentIcon = (type) => {
  const iconMap = {
    pdf: 'Document',
    docx: 'Document', 
    pptx: 'Document',
    xlsx: 'Document',
    jpg: 'Picture',
    png: 'Picture',
    gif: 'Picture',
    mp4: 'VideoPlay',
    avi: 'VideoPlay'
  }
  return iconMap[type] || 'Document'
}

const formatFileSize = (bytes) => {
  if (bytes === 0) return '0 B'
  const k = 1024
  const sizes = ['B', 'KB', 'MB', 'GB']
  const i = Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
}

const formatDate = (dateString) => {
  const date = new Date(dateString)
  const now = new Date()
  const diff = now - date
  const days = Math.floor(diff / (1000 * 60 * 60 * 24))
  
  if (days === 0) return '今天'
  if (days === 1) return '昨天'
  if (days < 7) return `${days}天前`
  if (days < 30) return `${Math.floor(days / 7)}周前`
  if (days < 365) return `${Math.floor(days / 30)}月前`
  return date.toLocaleDateString()
}

const previewDocument = (doc) => {
  // 跳转到文档预览页面
  router.push(`/preview/${doc.id}`)
}

const downloadDocument = (doc) => {
  // 模拟下载
  ElMessage.success(`开始下载: ${doc.name}`)
}

const toggleFavorite = (doc) => {
  doc.isFavorite = !doc.isFavorite
  ElMessage.success(doc.isFavorite ? '已添加到收藏' : '已取消收藏')
}

const viewRecentDocs = () => {
  // 设置筛选条件显示最近查看的文档
  ElMessage.info('显示最近查看的文档')
}

const viewFavorites = () => {
  // 设置筛选条件显示收藏的文档
  ElMessage.info('显示收藏的文档')
}

const uploadDoc = () => {
  // 打开上传对话框
  ElMessage.info('打开文档上传功能')
}

const handlePageChange = (page) => {
  currentPage.value = page
  // 滚动到顶部
  document.querySelector('.documents-area').scrollTop = 0
}

// 点击外部关闭搜索建议
const handleClickOutside = (event) => {
  const searchContainer = event.target.closest('.main-search')
  if (!searchContainer) {
    showSuggestions.value = false
  }
}

onMounted(() => {
  document.addEventListener('click', handleClickOutside)
})

// 监听搜索关键词变化
watch(searchKeyword, () => {
  if (!searchKeyword.value) {
    showSuggestions.value = false
  }
})
</script>

<style lang="scss" scoped>
.document-search-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.search-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 40px 20px 60px;
  text-align: center;
  
  .header-content {
    max-width: 1200px;
    margin: 0 auto;
  }
  
  .search-title {
    margin-bottom: 40px;
    
    h1 {
      font-size: 42px;
      font-weight: 600;
      margin: 0 0 12px 0;
      text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    
    p {
      font-size: 18px;
      opacity: 0.9;
      margin: 0;
    }
  }
  
  .main-search {
    max-width: 800px;
    margin: 0 auto 24px;
    position: relative;
    
    .search-input {
      :deep(.el-input__wrapper) {
        height: 64px;
        border-radius: 32px;
        box-shadow: 0 8px 32px rgba(0,0,0,0.1);
        border: none;
        background: white;
        
        .el-input__inner {
          font-size: 16px;
          padding: 0 20px;
        }
      }
      
      .search-icon {
        font-size: 20px;
        color: var(--el-color-primary);
      }
    }
    
    .search-btn {
      height: 48px;
      padding: 0 24px;
      border-radius: 24px;
      font-weight: 600;
    }
    
    .search-suggestions {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background: white;
      border-radius: 12px;
      box-shadow: 0 8px 32px rgba(0,0,0,0.15);
      z-index: 1000;
      margin-top: 8px;
      max-height: 300px;
      overflow-y: auto;
      
      .suggestion-item {
        display: flex;
        align-items: center;
        padding: 12px 20px;
        cursor: pointer;
        transition: background-color 0.2s;
        color: var(--el-text-color-primary);
        
        &:hover {
          background: var(--el-fill-color-light);
        }
        
        &:first-child {
          border-radius: 12px 12px 0 0;
        }
        
        &:last-child {
          border-radius: 0 0 12px 12px;
        }
        
        .el-icon {
          margin-right: 12px;
          color: var(--el-color-primary);
        }
      }
    }
  }
  
  .quick-tags {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    
    .tags-label {
      color: rgba(255,255,255,0.8);
      margin-right: 8px;
      font-size: 14px;
    }
    
    .quick-tag {
      background: rgba(255,255,255,0.1);
      border: 1px solid rgba(255,255,255,0.2);
      color: white;
      cursor: pointer;
      transition: all 0.3s;
      
      &:hover {
        background: rgba(255,255,255,0.2);
        transform: translateY(-1px);
      }
    }
  }
}

.main-content {
  background: var(--el-bg-color-page);
  min-height: calc(100vh - 200px);
  padding: 20px;
  margin-top: -40px;
  border-radius: 20px 20px 0 0;
  
  .content-container {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    gap: 24px;
  }
}

.filter-panel {
  width: 280px;
  flex-shrink: 0;
  
  .filter-section {
    background: white;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.08);
    
    h3 {
      margin: 0 0 20px 0;
      font-size: 18px;
      font-weight: 600;
      color: var(--el-text-color-primary);
    }
    
    .filter-group {
      margin-bottom: 24px;
      
      h4 {
        margin: 0 0 12px 0;
        font-size: 14px;
        font-weight: 600;
        color: var(--el-text-color-regular);
      }
      
      .el-checkbox-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
      
      .el-radio-group {
        display: flex;
        flex-direction: column;
        gap: 8px;
      }
    }
    
    .quick-actions {
      display: flex;
      flex-direction: column;
      gap: 8px;
      
      .action-btn {
        justify-content: flex-start;
        width: 100%;
        text-align: left;
        
        .el-icon {
          margin-right: 8px;
        }
      }
    }
    
    .filter-actions {
      text-align: center;
      padding-top: 16px;
      border-top: 1px solid var(--el-border-color-lighter);
    }
  }
}

.documents-area {
  flex: 1;
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  
  .results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--el-border-color-lighter);
    
    .results-info {
      .results-count {
        color: var(--el-text-color-regular);
        
        strong {
          color: var(--el-color-primary);
          font-weight: 600;
        }
      }
    }
    
    .results-controls {
      display: flex;
      align-items: center;
      gap: 12px;
    }
  }
  
  .documents-display {
    min-height: 400px;
  }
  
  .documents-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    
    .document-card {
      border: 1px solid var(--el-border-color-light);
      border-radius: 8px;
      overflow: hidden;
      cursor: pointer;
      transition: all 0.3s;
      background: white;
      
      &:hover {
        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
        transform: translateY(-2px);
      }
      
      .doc-thumbnail {
        height: 160px;
        background: var(--el-fill-color-lighter);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        
        .doc-icon {
          color: var(--el-text-color-placeholder);
        }
        
        .doc-type-badge {
          position: absolute;
          top: 8px;
          right: 8px;
          background: var(--el-color-primary);
          color: white;
          padding: 2px 8px;
          border-radius: 4px;
          font-size: 12px;
          font-weight: 600;
        }
      }
      
      .doc-info {
        padding: 16px;
        
        .doc-title {
          margin: 0 0 8px 0;
          font-size: 14px;
          font-weight: 600;
          color: var(--el-text-color-primary);
          line-height: 1.4;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
        
        .doc-meta {
          margin: 0 0 12px 0;
          font-size: 12px;
          color: var(--el-text-color-secondary);
          display: flex;
          justify-content: space-between;
        }
        
        .doc-tags {
          display: flex;
          flex-wrap: wrap;
          gap: 4px;
          
          .more-tags {
            font-size: 12px;
            color: var(--el-text-color-placeholder);
          }
        }
      }
      
      .doc-actions {
        padding: 0 16px 16px;
        display: flex;
        gap: 8px;
        
        .el-button {
          flex: 1;
        }
      }
    }
  }
  
  .documents-list {
    .doc-name-cell {
      .doc-name {
        display: block;
        font-weight: 500;
        margin-bottom: 4px;
      }
      
      .doc-tags-inline {
        display: flex;
        gap: 4px;
      }
    }
  }
  
  .empty-state {
    text-align: center;
    padding: 80px 20px;
    
    .empty-icon {
      color: var(--el-text-color-placeholder);
      margin-bottom: 16px;
    }
    
    h3 {
      margin: 0 0 8px 0;
      color: var(--el-text-color-regular);
    }
    
    p {
      margin: 0 0 24px 0;
      color: var(--el-text-color-secondary);
    }
  }
}

.pagination-container {
  margin-top: 32px;
  text-align: center;
}

// 响应式设计
@media (max-width: 1200px) {
  .content-container {
    flex-direction: column;
  }
  
  .filter-panel {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .search-header {
    padding: 20px 16px 40px;
    
    .search-title h1 {
      font-size: 28px;
    }
  }
  
  .main-content {
    padding: 16px;
    margin-top: -20px;
  }
  
  .documents-grid {
    grid-template-columns: 1fr;
  }
}
</style>